<!--
 * @FilePath: Index.vue
 * @Author: jack
 * @Date: 2024-05-14 17:04:20
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2025-05-22 15:31:34
 * Copyright: 2024 xxxTech CO.,LTD. All Rights Reserved.
 * @Descripttion: 
-->
<template>
    <div class="layer-common-box">
        <div class="row-center-flex row">
            <div style="flex: 1;">
                <!-- 富文本输入框 -->
                <el-row :gutter="20">
                    <el-col :span="12" class="row" style="display: flex;align-items: center;">
                        <div style="min-width:40px;">名称</div>
                        <el-input clearable placeholder="请输入" v-model="datainfo.name"></el-input>
                    </el-col>
                    <el-col :span="12" class="row" style="display: flex;align-items: center;">
                        <div style="min-width:40px;">内容</div>
                        <!-- oninput="value=value.replace(/[^\d.]/g,'').replace(/\.{2,}/g, '.').replace('.',
                        '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^\./g, '')" -->
                        <el-input clearable placeholder="请输入" v-model="datainfo.count"></el-input>
                    </el-col>
                </el-row>
            </div>
        </div>
        <div class="row-center-flex row" :style="index == datainfo.dataList.length - 1 ? '' : 'margin-bottom:15px;'"
            v-for="(item, index) in datainfo.dataList" :key="index">
            <div style="flex: 1;">
                <!-- 富文本输入框 -->
                <el-row :gutter="20">
                    <el-col :span="10" class="row" style="display: flex;align-items: center;">
                        <div style="min-width:40px;">等级</div>
                        <el-input clearable placeholder="请输入" v-model="item.level_name"></el-input>
                    </el-col>
                    <el-col :span="4" class="row" style="display: flex;align-items: center;">
                        <div style="min-width:40px;">图标</div>
                        <div class="iconSelect" @click="changeIcon(index)">
                            <SvgIcon v-if="item.icon" :icon-class="item.icon" color="#737A80"
                                style="width: 100%;height:100%;"></SvgIcon>
                            <el-icon color="#737A80" v-else>
                                <Plus />
                            </el-icon>
                        </div>
                    </el-col>
                    <el-col :span="10" class="row" style="display: flex;align-items: center;">
                        <div style="min-width:40px;">内容</div>
                        <el-input clearable placeholder="请输入" v-model="item.level_num"></el-input>
                    </el-col>
                </el-row>
            </div>
            <div class="row" style="width: 80px;">
                <div class="del-btn-box" @click="toDel(index)" v-if="datainfo.dataList.length != 1">
                    <el-icon>
                        <RemoveFilled />
                    </el-icon>
                </div>
                <div class="add-btn-box" @click="toAdd(index)">
                    <el-icon>
                        <CirclePlusFilled />
                    </el-icon>
                </div>
            </div>
        </div>
        <!-- 选择图标抽屉 -->
        <el-drawer v-model="drawer" title="icon图标集合，点击可复制" :direction="direction">
            <IconDemo @selectchangeIcon="selectchangeIcon"></IconDemo>
        </el-drawer>
    </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, watch } from 'vue'
import { getScreenSettingList, materialSetting, operateScreenSetting } from '../../Api/index'
import { ElMessage, ElMessageBox } from 'element-plus'
import $util from '../../../util/util'
import IconDemo from '../../IconDemo/index.vue'
interface PropsType {
    currentItem?: any
    typeId?: string
}
const props = withDefaults(defineProps<PropsType>(), {
    currentItem: {},
    typeId: ''
})
const emit = defineEmits<EmitType>()
interface EmitType {
    (e: 'getConfig'): void
}
const datainfo = ref<any>({
    name: '',
    count: '',
    dataList: [
        {
            id: $util.generateUniqueId([]),
            level_name: '',
            level_num: '',
            icon: '',
        }
    ]
})
// const dataList = ref<any>()
const drawer = ref<boolean>(false)
const currentIndex = ref<number>(-1)
const changeIcon = async (index: number) => {
    currentIndex.value = index
    drawer.value = true
}
const selectchangeIcon = (val: string) => {
    datainfo.value.dataList[currentIndex.value].icon = val
    drawer.value = false
}
// 获取所有大屏数据类目配置
const configlist = ref<any>([])
const getScreenConfig = async () => {
    const res: any = await getScreenSettingList({ type_id: props.typeId })
    if (res.code !== 1) return ElMessage.error(res.message)
    if (res.data.length > 0) {
        configlist.value = res.data[0].content
    }
}
// 初始化数据
const getInnit = async () => {
    if (props.currentItem.content) {
        datainfo.value = JSON.parse(JSON.stringify(props.currentItem.content))
    }
    getScreenConfig()
}
watch(
    () => props.typeId,
    (newValue, oldValue) => {
        getInnit()
    },
    { deep: true, immediate: true, }
)

const toDel = (index: number) => {
    datainfo.value.dataList.splice(index, 1)
}
const toAdd = (index: number) => {
    datainfo.value.dataList.splice(index + 1, 0, {
        id: $util.generateUniqueId(datainfo.value.dataList),
        level_name: '',
        level_num: '',
        icon: '',
    })
}
const submitFrom = async () => {
    // 判断是否有未填写的数据
    let i = 0
    datainfo.value.dataList.forEach((item: any) => {
        if (!item.level_name || !item.level_num || !item.icon) {
            i++
        }
    })
    if (i > 0) {
        return ElMessage.error('请输入完整信息再提交！')
    }
    const res: any = await materialSetting({ type_id: props.typeId, content: datainfo.value })
    if (res.code !== 1) return ElMessage.error(res.message)
    // 修改成功之后提交大屏配置修改接口
    setConfig()
    ElMessage.success(res.message)
    emit('getConfig')
}
// 大屏配置修改接口
const setConfig = async () => {
    //  先对修改的数据作比较
    datainfo.value.dataList = JSON.parse(JSON.stringify($util.updateData(datainfo.value.dataList, configlist.value)))
    const params = {
        type_id: props.typeId,
        content: datainfo.value
    }
    const res: any = await operateScreenSetting(params)
    if (res.code !== 1) return ElMessage.error(res.message)
    getScreenConfig()
}
const refreshChild = async () => {
    emit('getConfig')
    setTimeout(async () => {
        await getInnit()
    }, 500);
}
onMounted(() => {
})
defineExpose({ submitFrom, refreshChild })
</script>
<style lang="scss" scoped>
.layer-common-box {
    width: 50%;
    height: calc(100vh - 320px);
    overflow-y: scroll;

    .row-center-flex {
        display: flex;
        align-items: center;
        background: #FAFAFA;
        padding: 20px;
        margin-top: 20px;
        color: #737A80;
        border-radius: 3px;

        .flex-name {
            color: #737A80;
            margin-right: 15px;
        }

        .el-icon {
            font-size: 18px;
            cursor: pointer;
            color: #B8B8B8;
            margin-left: 15px;
        }

        .iconSelect {
            width: 32px;
            height: 32px;
            padding: 4px;
            border: 1px solid #dcdfe6;
            border-radius: 4px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center;

            i {
                margin-left: 0px;
            }
        }
    }
}
</style>